<template>
	<div class="center-bottom">
		<div class="module-title">
			<span class="text">受伤登记检测监测</span>
			<SelectView @change="change" />
		</div>

		<div class="center-bottom-list">
			<li>
				<div>受伤登记人总数</div>
				<div class="value">{{ data.count }}<span class="unit">人</span></div>
			</li>
			<li>
				<div>受伤登记人数占总人口比例</div>
				<div class="value">
					{{ data.percentage }}<span class="unit">%</span>
				</div>
			</li>
		</div>
	</div>
</template>

<script>
import SelectView from './SelectView.vue';
import { getCenterBottonData } from '@/api';
export default {
	name: 'center-bottom',
	components: {
		SelectView,
	},
	data() {
		return {
			data: {},
		};
	},

	methods: {
		//  根据筛选条件 默认触发一次
		change(type) {
			this.getData(type);
		},
		async getData(type) {
			const result = await getCenterBottonData(type);
			this.data = result || {};
		},
	},
};
</script>
<style lang="scss">
.center-bottom {
	padding: 1vh 2%;
	margin-top: 2.2vh;

	.center-bottom-list {
		width: 35.41666vw;
		height: 7.59259vh;
		padding-left: 0.74074vh;
		scroll-padding-right: 0.74074vh;
		display: flex;
		grid-template-columns: 17.552083vw 17.552083vw;
		grid-column-gap: 0.74074vh;
		margin-top: 1.5vh;

		li {
			display: flex;
			flex-direction: column;
			justify-content: center;

			width: 17.552083vw;
			color: #fff;
			font-weight: bolder;
			font-size: 1.29629vh;
			padding-left: 1.5vw;

			.value {
				font-size: 2.222222vh;
				color: #3bacff;
				font-weight: bold;
				margin-top: 1vh;

				.unit {
					font-size: 1.2962vh;
					font-weight: 400;
				}
			}
		}
	}
}
</style>
